<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-wms__purchase}">
      <wms-form v-model="dataForm" :formList="formList" :table-column="tableColumn" :advanced="advanced"
        :showScreen="false" @check-change="checkChange" @changeAdvance="changeAdvance" @getDataList="getDataList"
        @getReset="getReset">
        <el-form-item>
          <el-button v-if="$hasPermission('wms:purchase:update')" type="primary" @click="addOrUpdateHandle()">{{
            $t("add")
          }}</el-button>
        </el-form-item>
      </wms-form>
      <el-row v-loading.lock="dataListLoading"  :gutter="10">
        <template v-if="dataList.length" >
          <el-col class="card-col" :span="8" v-for="item in dataList" :key="item.purchaseNo">
          <div class="card-content">
            <div class="card-header">
              <i title="单号" class="el-icon-tickets"></i>
              <a>{{ item.purchaseNo }}</a>
            </div>
            <div class="card-body">
              <el-row style="marginBottom: 10px">
                <el-col title="交货单" :span="15">
                  <i class="el-icon-document"></i>
                  <span>{{ item.deliverNo }}</span>
                </el-col>
                <el-col title="所属系统" :span="9">
                  <i class="el-icon-place"></i>
                  <span>{{ item.belongSystem }}</span>
                </el-col>
              </el-row>
              <el-row style="marginBottom: 10px">
                <el-col title="主单类型" :span="15">
                  <i class="el-icon-price-tag"></i>
                  <span>{{ item.purchaseType }}</span>
                </el-col>
                <el-col title="主单状态" :span="9">
                  <i class="el-icon-pie-chart"></i>
                  <el-tag size="small" style="marginLeft: 5px" :type="calType(item.purchaseSt)">{{
                    calStatus(item.purchaseSt) }}</el-tag>
                </el-col>
              </el-row>
              <el-row style="marginBottom: 10px">
                <el-col title="供应商" :span="16">
                  <i class="el-icon-truck"></i>
                  <span>{{ item.supplierName }}</span>
                </el-col>
              </el-row>
              <el-row style="marginBottom: 10px">
                <el-col title="创建用户" :span="8">
                  <i class="el-icon-user"></i>
                  <span>{{ item.creatorName }}</span>
                </el-col>
                <el-col title="创建时间" :span="16">
                  <i class="el-icon-timer"></i>
                  <span>{{ item.createDate }}</span>
                </el-col>
              </el-row>
              <el-row style="marginBottom: 10px">
                <el-col title="更新用户" :span="8">
                  <i class="el-icon-user"></i>
                  <span>{{ item.updaterName }}</span>
                </el-col>
                <el-col title="更新时间" :span="16">
                  <i class="el-icon-alarm-clock"></i>
                  <span>{{ item.updateDate }}</span>
                </el-col>
              </el-row>
              <el-row>
                <!-- <el-col :span="6">
                  <el-button title="编辑" icon="el-icon-edit" @click="addOrUpdateHandle(item.purchaseId)"></el-button>
                </el-col>
                <el-col :span="6">
                  <el-button title="删除" icon="el-icon-delete" @click="deleteHandle(item.purchaseId)"></el-button>
                </el-col> -->
                <el-col :span="6">
                  <el-button title="查看明细" icon="iconfont icon-xiangqing1" @click="getDetail(item)"></el-button>
                </el-col>
                <el-col :span="6"><el-button title="查看单号" icon="iconfont icon-erweima1"
                    @click="openCode(item.deliverNo)"></el-button></el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        </template>
        <template v-else>
          <el-empty description="暂无数据"></el-empty>
        </template>
        
      </el-row>
      
      <el-pagination :current-page="page" :page-sizes="[6, 10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <el-dialog title="单号二维码" :visible.sync="dialogVisible" width="30%">
        <bar-code v-if="dialogVisible" :showCode="showCode" />
        <p class="showCode">{{ showCode }}</p>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { addDynamicRoute } from "@/router";
import AddOrUpdate from './components/purchase-add-or-update'
import { read, utils } from "xlsx"
import { formList } from './config'
import BarCode from '@/components/barCode/index.vue'
import wmsForm from '@/components/wms-form'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      fullscreenLoading: true,
      mixinViewModuleOptions: {
        getDataListURL: '/wms/purchase/page',
        getDataListIsPage: true,
        exportURL: '/wms/purchase/export',
        deleteURL: '/wms/purchase',
        deleteIsBatch: true
      },
      checkList: [],
      tableData: [],
      tableHead: [],
      dataForm: {
        purchaseId: ''
      },
      formList,
      limit: 6,
      code: false,
      qr: '',
      dialogVisible: false,
      showCode: ''
    }
  },
  components: {
    AddOrUpdate,
    BarCode,
    wmsForm
  },
  methods: {
    // 状态显示筛选
    calType(status) {
      let statusName = ''
      switch (status) {
        case 0:
          statusName = 'primary'
          break;
        case 1:
          statusName = 'warning'
          break;
        case 2:
          statusName = 'success'
          break;
        default:
          statusName = 'danger'
          break;
      }
      return statusName
    },
    // 主单筛选
    calStatus(status) {
      let statusName = ''
      switch (status) {
        case 0:
          statusName = '初始'
          break;
        case 1:
          statusName = '收货中'
          break;
        case 2:
          statusName = '收货完成'
          break;
        default:
          statusName = '废弃'
          break;
      }
      return statusName
    },
    // 3.任务跳转
    getDetail(row) {
      // 路由参数
      const routeParams = {
        routeName: `${this.$route.name}__${row.purchaseId}`,
        title: `入库明细 - ${row.purchaseId}`,
        path: "wms/purchase-detail",
        params: {
          mtNo: row.purchaseNo,
          dtId: row.purchaseId,
        },
      }
      // 动态路由
      addDynamicRoute(routeParams, this.$router);
    },
    checkChange(val) {
      console.log(val, this.checkList);
    },
    // 上传文件
    uploadFile(e) {
      const file = e.file
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取对应表生成json表格内容
          workbook.SheetNames.forEach(item => {
            params.push({
              name: item,
              dataList: utils.sheet_to_json(workbook.Sheets[item])
            });
            this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });
          // 该算法仅针对表头无合并的情况
          if (this.tableData.length > 0) {
            // 获取excel中第一个表格数据tableData[0][0]，并且将表头提取出来
            for (const key in this.tableData[0][0]) {
              this.tableHead.push(key);
            }
          }
          console.log(this.tableData, this.tableHead, 'tabledata');
          return params;
          // 重写数据
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file);
    },
    successHandle(val1, val2) {
      console.log(val1, val2, 'aaaaaa');
    },
    openCode(purchaseNo) {
      this.showCode = purchaseNo
      this.dialogVisible = true
    }
  }
}
</script>
<style>
/* .v-modal {
  z-index: 2000 !important;
} */
</style>
<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 300px;

  // .el-dialog__header {
  //   display: none;
  // }
  .showCode {
    margin-bottom: 0;
    text-align: center;
  }
}

i {
  color: steelblue;
}

.card-col {
  position: relative;

  .check {
    position: absolute;
    top: 5px;
    right: 10px;
  }
}

.card-content {
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 20px 10px 20px;
  border-radius: 8px;

  .card-header {
    // text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;

    a {
      text-decoration: none;
    }

    i {
      font-size: 24px;
      vertical-align: top;
      margin-right: 8px;
    }
  }

  .el-row {
    padding: 0 5px 0;
    display: flex;
    align-items: center;

    .el-col {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      span {
        margin-left: 2px;
      }
    }
  }
}
</style>
